import {Tabs} from 'nextra/components';
import Callout from '@/components/Callout';

# Next.js Pages Router internationalization (i18n)

While it's recommended to [use `next-intl` with the App Router](/docs/getting-started/app-router), the Pages Router is still fully supported.

<Tabs items={['Multiple languages', 'Single language']}>
<Tabs.Tab>
1. `npm install next-intl`
2. Set up [internationalized routing](https://nextjs.org/docs/advanced-features/i18n-routing)
3. Add the provider in `_app.tsx`

```jsx filename="_app.tsx" /NextIntlClientProvider/
import {NextIntlClientProvider} from 'next-intl';
import {useRouter} from 'next/router';

export default function App({Component, pageProps}) {
  const router = useRouter();

  return (
    <NextIntlClientProvider
      locale={router.locale}
      timeZone="Europe/Vienna"
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}
```

4. Provide messages on a page-level

```js filename="pages/index.tsx"
export async function getStaticProps(context) {
  return {
    props: {
      // You can get the messages from anywhere you like. The recommended
      // pattern is to put them in JSON files separated by locale and read
      // the desired one based on the `locale` received from Next.js.
      messages: (await import(`../../messages/${context.locale}.json`)).default
    }
  };
}
```

5. Use translations in your components!

</Tabs.Tab>
<Tabs.Tab>
Even if you only support a single language, `next-intl` can still be helpful to separate your labels and formatting concerns from your application logic.

1. `npm install next-intl`

2. Add the provider in `_app.tsx`

```jsx filename="_app.tsx" /NextIntlClientProvider/
import {NextIntlClientProvider} from 'next-intl';

export default function App({Component, pageProps}) {
  return (
    <NextIntlClientProvider
      locale="en"
      timeZone="Europe/Vienna"
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}
```

3. Provide messages on a page-level

```js filename="pages/index.tsx"
export async function getStaticProps() {
  const locale = 'en';

  return {
    props: {
      // You can get the messages from anywhere you like. The recommended pattern
      // is to put them in JSON files separated by locale (e.g. `en.json`).
      messages: (await import(`../../messages/${locale}.json`)).default
    }
  };
}
```

4. Use translations in your components!

</Tabs.Tab>
</Tabs>

<Callout>

**Next steps:**

<ul className="ml-4 list-disc">
  <li>Exploring `next-intl`? Check out the [usage guide](/docs/usage).</li>
  <li>
    Ran into an issue? Have a look at the [Pages Router
    example](/examples#pages-router) to explore a working app.
  </li>
  <li>
    Are you transitioning from the Pages to the App Router? Check out [the
    migration example](/examples#app-router-migration).
  </li>
</ul>

</Callout>
